<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <input type="checkbox" name="" id="">全选
        <div class="box"></div>
        <p>总数量：<span>0</span></p>
        <p>总价格：<span>0.00</span></p>
    </div>
    <script>
        let products = [
        {
            goods_name: '小米10-1',
            goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
            goods_price: '500',
            goods_attr: '砂石黑4GB+64GB',
            goods_num: 10,
            goods_is_checked: true
        },
        {
            goods_name: '小米10-2',
            goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
            goods_price: '510',
            goods_attr: '砂石黑4GB+64GB',
            goods_num: 50,
            goods_is_checked: false
        }
];
        let allinp = document.querySelector('.wrap>input');
        for(let i = 0;i<products.length;i++){
            let ouls = document.createElement('ul');
            ouls.className = 'ouls';
            ouls.innerHTML =`
            <input type="checkbox" name="" id="">
            <ul>
                <li>商品名称：${products[i].goods_name}</li>
                <li><img src="${products[i].goods_img}"></li>
                <li>商品价格：${products[i].goods_price}</li>
                <li>购买数量：${products[i].goods_num}</li>
                <li>商品规格：${products[i].goods_attr}</li>
                <li>是否选中：${products[i].goods_is_checked ? '选中吧' : '不选中啊'}</li>
            </ul>
            `;
            document.querySelector('.box').appendChild(ouls);
        }
    </script>
</body>
</html>